<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="topNav">
      <el-breadcrumb :separator-icon="ArrowRight">

        <el-breadcrumb-item>
          <span v-if="code">编辑入库单</span>
          <span v-if="!code">新增入库单</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="together-content">
      <!-- 新增/编辑入库单的入库单信息 -->
      <div>
        <el-form :inline="true" label-width="auto" style="width: 100%">
          <!-- 调拨单编码 -->
          <el-form-item label="单据编号">
            <el-input v-model="editingOrder.code" style="width: 150px; height: 1.5rem" readonly />
          </el-form-item>

          <!-- 组装费用 -->
          <el-form-item label="组装费用">
            <el-input v-model="editingOrder.cost" style="width: 150px; height: 1.5rem" />
          </el-form-item>

          <!-- 时间范围选择 -->
          <el-form-item label="日期">
            <el-date-picker v-model="editingOrder.createdDate" type="date" placeholder="选择日期" size="small"
              style="width: 150px" value-format="YYYY-MM-DD" />
          </el-form-item>

          <!-- 不需要，关联采购单后有供应商信息  -->
          <!-- <el-form-item label="供应商">
            <el-select style="width: 150px">
              <el-option />
            </el-select>
          </el-form-item> -->

          <!--  -->
          <!-- <el-form-item label="关联采购单">
            <el-input style="width: 150px" placeholder="选择采购单" readonly />
          </el-form-item> -->
        </el-form>
      </div>

      <!-- 分割线 -->
      <el-divider />

      <!-- 操作按钮 -->
      <div style="margin-bottom: 15px; text-align: right">
        <el-button type="primary" size="small">保存</el-button>
        <el-button type="success" size="small">保存并提交</el-button>
        <el-button type="info" size="small">审核</el-button>
        <el-button type="info" size="small">反审核</el-button>
      </div>

      <!-- 模版操作 -->
      <el-button size="small">选择模板</el-button>
      <el-button size="small">存为模板</el-button>
      <el-button size="small">更新模板</el-button><br /><br />

      <div style="margin-bottom: 0.5rem">
        <span style="font-size: 0.7rem;font-weight: bold;">组合件：</span>
        <span style="margin-left: 2rem; font-size: 0.8rem">模版编号:{{}}
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;模版名称:{{ }}</span>
      </div>
      <el-table :data="mergeArr" style="width: auto" border>
        <el-table-column label="商品" width="160" align="center">
          <el-input readonly size="small" placeholder="选择商品" style="width: 95%" />
        </el-table-column>
        <el-table-column label="商品类别" width="120" align="center">
          <el-input size="small" style="width: 95%" disabled />
        </el-table-column>
        <el-table-column label="规格" width="140" align="center">
          <el-input :min="1" step="1" style="width: 95%" />
        </el-table-column>
        <el-table-column label="单位" width="160" align="center">
          <el-input readonly placeholder="" style="width: 80%" />
        </el-table-column>
        <el-table-column label="仓库" width="160" align="center">
          <el-input readonly placeholder="选择仓库" />
        </el-table-column>
        <el-table-column label="数量" width="160" @click="openWarehouseView(-1)" align="center">
          <el-input-number placeholder="" style="width: 80%" />
        </el-table-column>

        <el-table-column label="备注" width="160" align="center">
          <el-input placeholder="" style="width: 80%" />
        </el-table-column>
      </el-table><br />

      <span style="font-size: 0.7rem;font-weight: bold;">子件：</span>
      <el-table :data="detailList" style="width: 100%" border>
        <!-- 操作列 -->
        <el-table-column label="操作" width="80px" align="center" fixed="left">
          <template #default="scope">
            <!-- add -->
            <el-button link type="success" size="small" plain><el-icon>
                <Plus />
              </el-icon></el-button>
            <!-- del -->
            <el-button link type="danger" size="small" plain @click="removeDetailRow(scope.row.id)"><el-icon>
                <Minus />
              </el-icon></el-button>
          </template>
        </el-table-column>

        <el-table-column prop="goodsCode" label="商品" width="140" align="center">
          <el-input readonly size="small" placeholder="选择商品" style="width: 95%" />
        </el-table-column>

        <el-table-column prop="goodsProp" label="规格" width="160" align="center">
          <el-input size="small" style="width: 95%" disabled />
        </el-table-column>

        <el-table-column prop="unit" label="单位" width="140" align="center">
          <el-input-number :min="1" step="1" style="width: 95%" />
        </el-table-column>

        <el-table-column prop="sourceWarehouseCode" label="仓库" width="160" align="center">
          <template #default="scope">
            <el-input readonly placeholder="" style="width: 80%" @click="openWarehouseView(scope.row)" />
          </template>
        </el-table-column>

        <el-table-column prop="targetWarehouseCode" label="可用库存" width="160" align="center">
          <el-input v-model="input" readonly style="width: 80%" />
        </el-table-column>

        <el-table-column prop="targetWarehouseCode" label="数量" width="160" align="center">
          <el-input v-model="input" readonly style="width: 80%" />
        </el-table-column>

        <el-table-column label="备注" width="160" align="center">
          <el-input placeholder="" style="width: 80%" />
        </el-table-column>
      </el-table><br />

      <!-- 调拨单备注 -->
      <el-input v-model="editingOrder.remark" style="width: 100%" type="textarea" placeholder="暂无备注信息" />

      <!--操作日志-->
      <div style="margin-bottom: 15px; text-align: right">
        <br />
        <el-button plain @click="router.push({ name: 'salesMargeOp' })">历史记录</el-button>
        <el-button plain>操作日志</el-button>
      </div>


      <!-- 仓库搜索列表弹出对话框 -->
      <el-dialog v-model="warehouseVisible" title="仓库搜索列表" width="40%" style="height: auto;" draggable
        :show-close="true">
        <!-- 调用仓库的搜索组件 -->
        <WareHouse ref="warehouseRef"
          :info="{ selection: true, no: false, name: true, code: true, status: false, op: false, outButton: true }" />
        <br /><br />
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, watch } from "vue";
import { useRouter } from 'vue-router'
import WareHouse from '@/views/basic/WareHouse.vue'
let router = useRouter();
let editingOrder = ref({});
let mergeArr = ref([
  {}
])
let detailList = ref([{}, {}, {}, {}, {}]);
defineProps(["code"]);

function removeDetailRow(id) {
  console.log(id)
}

//仓库搜索选中结果
let warehouseVisible = ref(false)
let input = ref('')
let warehouseRef = ref();
watch(warehouseVisible, (newVisible) => {
  if (!newVisible) {
    if (warehouseRef.value) { //这里需要加上if判断，子组件中没有选择数据时为undefined，可能用于点击仓库，但是没选择，所以导致undefined报错
      input.value = warehouseRef.value.selectedArray.map(item => item.name).join(',')
      //获取到仓库编码，存数据库用，仓库name仅用作展示
      //用完之后清空，避免污染其他地方数据
      warehouseRef.value.clearSelected();
    }
  }
})

</script>

<style></style>